<template>
	<navigator :url="'/pages/gonglue/detail?id='+item.id" class="item" :open-type="opentype" v-if="item.img.length<2&&!item.is_video">
		<view class="desc">
			<view class="title">{{item.title}}</view>
			<view class="jianjie">{{item.jianjie}}</view>
			<view class="botton">{{item.source}}&nbsp;&nbsp;&nbsp;&nbsp; {{item.time}} </view>
		</view>
		<image class="item-image" :src="item.img[0]"></image>		
	</navigator>
	<view class="item-heng" v-else-if="item.is_video">
		<navigator :url="'/pages/gonglue/detail?id='+item.id" class="title">{{item.title}}</navigator>
		<view  class="video-corve">
				<video  class="video" object-fit="fill" :src="item.video" controls :poster="item.img[0]" ></video>
		</view>
		<view class="bottom">{{item.source}} &nbsp;&nbsp;&nbsp;&nbsp; {{item.time}} </view>
	</view>
	<navigator :url="'/pages/gonglue/detail?id='+item.id" class="item-heng"  v-else-if="item.img.length>2&&!item.is_video">
		<view class="title">{{item.title}}</view>
				<view class="jianjie">{{item.jianjie}}</view>
		<view class="img-corve">
				<image class="item-image" :src="img" v-for="(img,index) in item.img"></image>	
		</view>
		<view class="bottom">{{item.source}} &nbsp;&nbsp;&nbsp;&nbsp; {{item.time}} </view>
	</navigator>
</template>

<script>
	export default {
		props:
		{
			item: {
				value: Object,
				default: {}
			},
			opentype:{
				value:String,
				default:"navigate"
			}
		},
		data() {
			return {
				show:false	
			};
		}
	}
</script>

<style  scoped lang="scss">
	.item-heng{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
		border-bottom: 2rpx solid #F3F3F3;
		.title{
			font-size:35rpx;
			font-family:SourceHanSansCN;
				font-weight:bold;
			color:rgba(73,73,73,1);
			line-height:40rpx;
		
		}
		.video-corve{
			width:690rpx;
			height:385rpx;
		margin-top: 19rpx;
		margin-bottom: 19rpx;
			border-radius:10rpx;
			.video{
				width:690rpx;
				height:365rpx;
				border-radius:10rpx;
			}
		}
		.img-corve{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-top: 19rpx;
			padding-bottom: 19rpx;
			.item-image{
				width:223rpx;
				height:190rpx;
				background:rgba(0,0,0,1);
				border-radius:10rpx;
			}
		}
		.bottom{
			color: #999B9F;
			font-size:24rpx;
			font-weight:500;
		}
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
		border-bottom: 2rpx solid #F3F3F3;
		.desc{
			width: 358rpx;
			height: 190rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				font-size:35rpx;
				font-family:SourceHanSansCN;
				font-weight:bold;
				color:rgba(73,73,73,1);
				line-height:40rpx;
				overflow:hidden;
				
				text-overflow:ellipsis;
				
				display:-webkit-box;
				
				-webkit-box-orient:vertical;
				
				-webkit-line-clamp:2;
			}
			.jianjie{
				
				font-size: 24rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #999B9F;
				line-height: 34rpx;
						overflow:hidden;
				text-overflow:ellipsis;
				
				display:-webkit-box;
				
			
				
	
				
				-webkit-box-orient:vertical;
				
				-webkit-line-clamp:2;
				-webkit-box-orient:vertical;
				
				-webkit-line-clamp:2;
			}
			.botton{
				color: #999B9F;
				font-size:24rpx;
				font-weight:500;
			}
		}
		.item-image{
			width: 250rpx;
			height: 190rpx;
			border-radius:10rpx;
		}
	}
</style>
